<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="queryParams.goods_name" placeholder="请输入商品名称" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="渠道来源" prop="goods_channel_id">
                <el-input v-model="queryParams.goods_channel_id" placeholder="请输入渠道来源" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="商品分组" prop="goods_group_id">
                <el-select v-model="queryParams.goods_group_id" placeholder="商品分组" clearable style="width: 240px">
                    <!-- <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
                        :value="dict.value" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_type_id">
                <el-select v-model="queryParams.goods_type_id" placeholder="商品分组" clearable style="width: 240px">
                    <!-- <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
                        :value="dict.value" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="商品状态" prop="good_status">
                <el-select v-model="queryParams.good_status" placeholder="商品状态" clearable style="width: 240px">
                    <!-- <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
                        :value="dict.value" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="拥有者" prop="owner">
                <el-select v-model="queryParams.owner" placeholder="商品状态" clearable style="width: 240px">
                    <!-- <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
                        :value="dict.value" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="审核状态" prop="audit_status">
                <el-select v-model="queryParams.audit_status" placeholder="审核状态" clearable style="width: 240px">
                    <!-- <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
                        :value="dict.value" /> -->
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:role:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleImport"
                    v-hasPermi="['system:role:edit']">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:role:export']">导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="bulkListings"
                    v-hasPermi="['system:role:remove']">批量上架</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="bulkDelisting"
                    v-hasPermi="['system:role:remove']">批量下架</el-button>
            </el-col>
            <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
        </el-row>
        <el-table :data="roleList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="商品id" prop="goods_id" width="120" />
            <el-table-column label="商品图片" prop="goods_pic" width="150" />
            <el-table-column label="商品视频" prop="goods_video" width="150" />
            <el-table-column label="商品名称" prop="goods_name" width="150" />
            <el-table-column label="品类规格" prop="goods_spec_id" width="150" />
            <el-table-column label="渠道来源" prop="goods_channel_id" width="150" />
            <el-table-column label="采购价" prop="purchase_price" width="150" />
            <el-table-column label="成本价" prop="cost_price" width="150" />
            <el-table-column label="商品分组" prop="goods_group_id" width="150" />
            <el-table-column label="商品分类" prop="goods_type_id" width="150" />
            <el-table-column label="实际销量" prop="actual_sales" width="150" />
            <el-table-column label="库存状态" prop="stock_status" width="150" />
            <el-table-column label="库存数量" prop="stock" width="150" />
            <el-table-column label="库存状态" prop="stock_status" width="150" />
            <el-table-column label="商品状态" prop="good_status" width="150" />
            <el-table-column label="拥有者" prop="stock_status" width="150" />
            <el-table-column label="来源网址" prop="form_url" width="150" />
            <el-table-column label="审核状态" prop="audit_status" width="150" />
            <el-table-column label="操作" prop="audit_status" width="150" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="商品名称" prop="goods_name">
                    <el-input v-model="form.goods_name" placeholder="请输入商品名称" />
                </el-form-item>
                <el-form-item label="商品图片" prop="roleName">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-remove="handleRemove"
                        :file-list="fileList">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete"
                                    @click="handleDownload(file)">
                                    <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="imgDialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="商品视频" prop="roleName">
                    <el-upload class="avatar-uploader" action="" v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
                        v-bind:on-progress="uploadVideoProcess" v-bind:on-success="handleVideoSuccess"
                        v-bind:before-upload="beforeUploadVideo" v-bind:show-file-list="false" :headers="headers">
                        <video v-if="videoForm.showVideoPath != '' && !videoFlag" v-bind:src="videoForm.showVideoPath"
                            class="avatar video-avatar" controls="controls">
                            您的浏览器不支持视频播放
                        </video>
                        <i v-else-if="videoForm.showVideoPath == '' && !videoFlag"
                            class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="videoFlag == true" type="circle" v-bind:percentage="videoUploadPercent"
                            style="margin-top: 7px"></el-progress>
                    </el-upload>
                </el-form-item>
                <el-form-item label="渠道来源" prop="goods_channel_id">
                    <el-select v-model="model" placeholder="">
                        <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> -->
                        <!-- </el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商" prop="goods_channel_id">
                    <el-select v-model="model" placeholder="">
                        <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> -->
                        <!-- </el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="进货价" prop="purchase_price">
                    <el-input v-model="form.purchase_price" placeholder="请输入进货价" />
                </el-form-item>
                <el-form-item label="成本价" prop="cost_price">
                    <el-input v-model="form.cost_price" placeholder="请输入成本价" />
                </el-form-item>
                <el-form-item label="品类规格">
                    <el-table :data="form.goods_spec_id" style="width: 100%">
                        <!-- 规格分组列 -->
                        <el-table-column label="规格分组" width="180">
                            <template slot-scope="{ row }">
                                <el-input v-model="row.group" placeholder="请输入规格分组"></el-input>
                            </template>
                        </el-table-column>

                        <!-- 规格名称列 -->
                        <el-table-column label="规格名称" width="180">
                            <template slot-scope="{ row }">
                                <div v-for="(item, idx) in row.specs" :key="idx" class="spec-input">
                                    <el-input v-model="row.specs[idx]" placeholder="请输入规格名称"
                                        style="width: 80%; margin-bottom: 5px">
                                    </el-input>
                                    <!-- 加号按钮（只在第一个输入框后显示） -->
                                    <el-button v-if="idx === 0" type="text" @click="addSpecInput(row)">+
                                    </el-button>
                                    <!-- 删除按钮（非第一个输入框显示） -->
                                    <el-button v-if="idx > 0" type="text" @click="removeSpecInput(row, idx)"
                                        style="color: #F56C6C">-
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>

                        <!-- 操作列 -->
                        <el-table-column label="操作">
                            <template slot-scope="{ $index }">
                                <!-- 第一行显示添加按钮 -->
                                <el-button v-if="$index === 0" type="primary" icon="el-icon-plus" @click="addTableRow">
                                    添加
                                </el-button>
                                <!-- 其他行显示删除按钮 -->
                                <el-button v-else type="danger" icon="el-icon-delete" @click="removeTableRow($index)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="发货地址" prop="goods_name">
                    <el-input v-model="form.goods_name" placeholder="请输入商品名称" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                goods_name: '',
                goods_channel_id: '',
                goods_group_id: '',
                goods_type_id: '',
                good_status: '',
                owner: '',
                audit_status: ''
            },
            roleList: [],
            form: {
                goods_pic: '',
                goods_video: '',
                goods_name: '',
                goods_spec_id: [
                    {
                        group: '',        // 规格分组
                        specs: ['']       // 规格名称（数组格式）
                    }
                ],
                goods_channel_id: '',
                purchase_price: 0,
                cost_price: 0,

            },
            total: 0,
            title: '新增商品',
            open: false,
            rules: {

            },
            dialogImageUrl: '',
            imgDialogVisible: false,
            disabled: false,
            fileList: [],
            videoFlag: false,
            //是否显示进度条
            videoUploadPercent: "",
            //进度条的进度，
            isShowUploadVideo: false,
            //显示上传按钮
            videoForm: {
                showVideoPath: "",  //回显的变量
            },
            headers: {}
        }
    },
    methods: {
        getList() { },
        handleQuery() { },
        resetQuery() {
            this.resetForm("queryForm");
        },
        handleAdd() {
            this.title = '新增商品'
            this.open = true
        },
        handleImport() { },
        handleExport() { },
        bulkListings() { },
        bulkDelisting() { },
        handleSelectionChange() { },
        // 表单重置
        reset() {
            this.form = {
                roleId: undefined,
                roleName: undefined,
                roleKey: undefined,
                roleSort: 0,
                status: "0",
                menuIds: [],
                deptIds: [],
                menuCheckStrictly: true,
                deptCheckStrictly: true,
                remark: undefined
            };
            this.resetForm("form");
        },
        // 图片上传
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.imgDialogVisible = true;
        },
        handleDownload(file) {
            const link = document.createElement('a');
            link.style.display = 'none';
            link.href = file.url;   // 使用文件URL或根据需求拼接下载地址
            link.download = file.name || 'download-file'; // 设置下载文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        handleRemove() {
            this.fileList = this.fileList.filter(item => item.uid !== file.uid);
        },
        //上传前回调
        beforeUploadVideo(file) {
            var fileSize = file.size / 1024 / 1024 < 50;   //控制大小  修改50的值即可
            if (
                [
                    "video/mp4",
                    "video/ogg",
                    "video/flv",
                    "video/avi",
                    "video/wmv",
                    "video/rmvb",
                    "video/mov",
                ].indexOf(file.type) == -1     //控制格式
            ) {
                layer.msg("请上传正确的视频格式");
                return false;
            }
            if (!fileSize) {
                layer.msg("视频大小不能超过50MB");
                return false;
            }
            this.isShowUploadVideo = false;
        },
        //进度条
        uploadVideoProcess(event, file, fileList) {    //注意在data中添加对应的变量名
            this.videoFlag = true;
            this.videoUploadPercent = file.percentage.toFixed(0) * 1;
        },
        //上传成功回调
        handleVideoSuccess(res, file) {
            this.isShowUploadVideo = true;
            this.videoFlag = false;
            this.videoUploadPercent = 0;

            console.log(res);
            //后台上传数据
            if (res.success == true) {
                this.videoForm.showVideoPath = res.data.url;    //上传成功后端返回视频地址 回显
            } else {
                this.$message.error("上传失败！");
            }
        },
        // 添加表格行
        addTableRow() {
            this.form.goods_spec_id.push({
                group: '',
                specs: ['']
            })
        },

        // 删除表格行
        removeTableRow(index) {
            this.form.goods_spec_id.splice(index, 1)
        },

        // 添加规格输入框
        addSpecInput(row) {
            row.specs.push('')
        },

        // 删除规格输入框
        removeSpecInput(row, index) {
            row.specs.splice(index, 1)
        },
        // 提交新增修改
        submitForm(){}
    }
}
</script>

<style></style>